<template>
	<view class="content">
		<!-- 返回主页 -->
		<view class="back" @click="back">
			<view class="backicon"></view>
		</view>
		<view class="toptitle">
			<text>我的班级</text>
			<view style="font-size: 35rpx;line-height: 70rpx;">快速查看执教班级信息</view>
		</view>
		<u-popup :show="show" :round="30" @close="close" closeOnClickOverlay
			overlayOpacity=0 duration=800>
		        <view class="fun">
					<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无班级信息" :show="showempty">
					</u-empty>
					<view style="margin-top: 10rpx;">
						
						<scroll-view scroll-y style="height: 1280rpx;">
							<u-list height="1280rpx"><!--  滑动到底部触发的事件-->
								<u-list-item v-for="(item, index) in indexList" :key="index"> <!-- -->
									<view class="classcard">
											<view>
										<uni-data-picker :localdata="item.studentList" popup-title="请选择班委"  
												@nodeclick="onnodeclick" >
											<text style="font-size: 40rpx; line-height: 80rpx;margin-left: 25rpx;color: #676767;">{{item.cname}}
											</text>
												<text class="studnt" style="font-size: 40rpx; line-height: 80rpx; margin-left: 320rpx;">设置班委
												</text>
										</uni-data-picker>
											</view>
										<uni-popup ref="popup" type="message">
											<uni-popup-message type="success" message="设置成功" :duration="2000"></uni-popup-message>
										</uni-popup>

										<view v-for="(items,indexs) in item.x" :key="indexs" style="padding-bottom:10px;">
											<view class="textinfo" style="margin-top: 25rpx;">
												<text  style="color: #676767;">班委名</text>
												<text style="float: right; margin-right: 25rpx;">{{items.sname}}</text>
											</view>
											<view class="textinfo">
												<text style="color: #676767;">学号</text>
												<text style="float: right; margin-right: 25rpx;">{{items.stuid}}</text>
											</view>
											<view class="textinfo">
												<text style="color: #676767;">电话</text>
												<text style="float: right; margin-right: 25rpx;">{{items.sphone}}</text>
											</view>
										</view>
									</view>	
								</u-list-item>
							</u-list>
						</scroll-view>
					</view>
				</view>
			
		</u-popup>
	</view>
</template>

<script>
	
	import {
		HNIT_URL,
		USERNAME
	} from "@/constants/index.js";
	export default {
		data() {
			return {
				
				tid:"",
				show: true,
				cname: '',
				bname: '',
				bid: '',
				bphone: '',
				xname: '',
				xid: '',
				xphone: '',
				indexList:[],
				showempty:false
			}
		},
		onLoad(){
			this.tid = uni.getStorageSync(USERNAME)
			this.query()
			
		},
		methods: {
			//设置成功弹窗
			showMessage(e){
				wx.showToast({
				     title: e,
				     icon: 'none',
				     duration: 2000//持续的时间
				   })
			},
			
				
			//选择栏监听事件
			// 设置班委选择好学委后执行此方法
			onnodeclick(node) {
				let sid=node.value;
				let scid=node.cid;
				let params = {
					tid: this.tid, //老师的id
					stuid:sid,	//学号
					cid:scid  //班级id
				}
				this.$request.post(HNIT_URL + "wx/setGoodStudent",params).then(res => {
					this.indexList = res        //将设置后的重新设置
					// 判断数据是否为空
					if(this.indexList.length == 0){
						this.showempty=true
					}
				});
				this.showMessage("设置成功");
			},	
			query(){
				// 发起请求
				let params = {
					tid: this.tid
				}
				this.$request.post(HNIT_URL + "wx/selectBorX",params).then(res => {
					this.indexList = res
					// 判断数据是否为空
					if(this.indexList.length == 0){
						this.showempty=true
					}
				})
			},
			// 返回上一页
			close() {
				uni.reLaunch({
					url: '/pages/teacher/my/index'
				});
			},
		}
	}
</script>

<style>
	.backicon {
		background-image: url("data:image/svg+xml,%3Csvg t='1689146294791' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='19508' width='200' height='200'%3E%3Cpath d='M501.30944 464.22016c0-19.99872-16-35.19488-35.99872-35.99872H310.4V350.62784L137.61536 464.22016l171.98592 113.59232V500.21888h155.70944c19.99872-0.79872 35.99872-16 35.99872-35.99872z' fill='%23005CFF' p-id='19509'%3E%3C/path%3E%3Cpath d='M886.38464 212.01408c0-39.46496-31.99488-71.45984-71.45984-71.45984H443.88864c-39.46496 0-71.45984 31.99488-71.45984 71.45984v117.69856a29.42464 29.42464 0 1 0 58.84928 0V225.00352a25.6 25.6 0 0 1 25.6-25.6h358.05184c2.72384 0 5.23264 0.88576 7.296 2.3552l-252.50816 91.904c-15.872 5.77536-28.74368 29.28128-28.74368 52.49536v382.88384H456.87808a25.6 25.6 0 0 1-25.6-25.6V598.7328a29.42464 29.42464 0 1 0-58.84928 0v117.69856c0 39.46496 31.99488 71.45984 71.45984 71.45984h97.08544v62.68928c0 23.21408 12.86656 37.3504 28.74368 31.57504l287.42144-104.61184c15.872-5.77536 28.74368-29.28128 28.74368-52.49536v-0.39424c0.3072-2.69824 0.50688-5.43232 0.50688-8.2176v-504.4224z' fill='%23005CFF' p-id='19510'%3E%3C/path%3E%3C/svg%3E");
		background-size: cover;
		width: 50rpx;
		height: 50rpx;
		margin-top: 6rpx;
		margin-left: 12rpx;
	}
	
	.back {
		position: fixed;
		width: 80rpx;
		margin-top: 10rpx;
		height: 60rpx;
		margin-left: -640rpx;
		border-radius: 80rpx;
		border: 1rpx #c6c6c6 solid;
		backdrop-filter: blur(5px); /* 设置高斯模糊效果 */
		background-color: rgba(255, 255, 255, 0.9);
	}
	.textinfo{
		margin-left: 20rpx;
		margin-top: 20rpx;
	}
	.classcard{
		margin-top: 20rpx;
		font-size: 38rpx;
		font-weight: bold;
		width: 95%;
		margin-bottom: 30rpx;
		background-color: white;
		margin-left: 20rpx;
		border-radius: 40rpx;
	}
	.tabtitle{
		margin-top: -30rpx;
		text-align: center;
		font-size: 38rpx;
		font-weight: bold;
		color: #414141;
	}
	.fun{
		width: 100%;
		/* margin-top: 60rpx; */
		height: 1300rpx;
		background-color: #eeeeee;
		border-radius: 40rpx;
	}
	.toptitle {
		margin-top: 100rpx;
		font-weight: bold;
		font-size: 60rpx;
		color: aquamarine;
		text-align: center;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	page {
		/* background-color: #eeeeee; */
		background: linear-gradient(to top, #55aaff 0%, #120f6d 100%);
		background-size: 100% 200%;
		animation: aurora 10s infinite;
		
	}
	@keyframes aurora {
	  0% {
	    background-position-y: 0;
	  }
	  50% {
	    background-position-y: 100%;
	  }
	  100% {
	    background-position-y: 0;
	  }
	}

</style>
